<template>
  <div>
    <el-card shadow="never" style="border: 0px">
      <el-tabs tab-position="top" :stretch="true" style="margin-top: 24px">
        <el-tab-pane label="关注了">
          <el-card v-if="total == 0" shadow="never" style="text-align: center; border: 0px">
            <p style="font-size: 1.355rem; color: #cbcdda; user-select: none">
              {{ msg }}
            </p>
            <el-image style="user-select: none" src="https://gitee.com/caohonghai8/Images/raw/master/blog/20201209172910.png"></el-image>
          </el-card>
          <div v-if="total != 0">
            <el-card shadow="never" style="margin-top: 10px" v-for="follows in follow" :key="follows.label">
              <el-row>
                <el-col :span="3">
                  <el-avatar :size="50" :src="follows.toUserAvatar"></el-avatar>
                </el-col>
                <el-col :span="18">
                  <div>
                    <a class="followName" style="
                        font-size: 1.333rem;
                        font-weight: 600;
                        color: #2e3135;
                        text-decoration: none;
                      " :href="/home/ + follows.toUserId">{{ follows.toUserName }}
                    </a>
                    <!-- <i class="el-icon-chat-dot-round" style="font-size: 1.333rem;float: right;"></i> -->
                    <el-button type="info" size="mini" icon="el-icon-message" style="float: right; margin-right: 4px" circle
                      @click="postMessage(follows.toUserId)" :data-id="follows.toUserId"></el-button>
                  </div>
                  <div>
                    <span style="
                        font-size: 1rem;
                        font-weight: 500;
                        color: #b9c0c8;
                        margin-top: 0.6rem;
                      ">{{ follows.toUserDescription }}</span>
                  </div>
                </el-col>
                <el-col :span="3">
                  <el-popconfirm title="确定要取消关注吗？" icon="el-icon-info" icon-color="red" @confirm="cancelFollower(follows.toUserId)"
                    :data-id="follows.toUserId">

                    <el-button type="warning" slot="reference" size="mini" icon="el-icon-close" circle></el-button>
                  </el-popconfirm>
                </el-col>
              </el-row>
            </el-card>
            <div class="block" style="margin-top: 48px">
              <el-pagination class="mpage" background layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize"
                :total="total" @current-change="followPage">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="关注者">
          <el-card v-if="totalFan == 0" shadow="never" style="text-align: center; border: 0px">
            <p style="font-size: 1.355rem; color: #cbcdda; user-select: none">
              {{ msgFans }}
            </p>
            <el-image style="user-select: none" src="https://gitee.com/caohonghai8/Images/raw/master/blog/20201209173702.png"></el-image>
          </el-card>
          <div v-if="totalFan != 0">
            <el-card shadow="never" style="margin-top: 10px" v-for="followItem in followFans" :key="followItem.label">
              <el-row>
                <el-col :span="3">
                  <el-avatar :size="50" :src="followItem.fromUserAvatar"></el-avatar>
                </el-col>
                <el-col :span="18">
                  <div>
                    <a class="followName" style="
                        font-size: 1.333rem;
                        font-weight: 600;
                        color: #2e3135;
                        text-decoration: none;
                      " :href="/home/ + followItem.fromUserId">{{ followItem.fromUserName }}
                    </a>
                    <!-- <el-button type="info" size="mini" icon="el-icon-message" style="float: right; margin-right: 4px" circle></el-button> -->
                    <el-button type="info" size="mini" icon="el-icon-message" style="float: right; margin-right: 4px" circle
                      @click="postMessage(followItem.fromUserId)" :data-id="followItem.fromUserId"></el-button>
                  </div>
                  <div>
                    <span style="
                        font-size: 1rem;
                        font-weight: 500;
                        color: #b9c0c8;
                        margin-top: 0.6rem;
                      ">{{ followItem.fromUserDescription }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <div class="block" style="margin-top: 48px">
              <el-pagination class="mpage" background layout="prev, pager, next" :current-page="currentFanPage" :page-size="pageFanSize"
                :total="totalFan" @current-change="fanPage">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 发送消息 -->
    <el-drawer :append-to-body="true" :visible.sync="innerDrawer" :destroy-on-close="true">
      <!-- 通过这个 向子组件传值 -->
      <Message :toUserId="toUserId" />
    </el-drawer>

  </div>
</template>
<script>
import Message from "../components/Message";

export default {
  components: { Message },
  data () {
    return {
      toUserId: 0,
      followFans: {},
      currentFanPage: 1,
      totalFan: 0,
      pageFanSize: 7,
      msg: "您当前还没有关注别人哦，去博客广场逛逛，关注可以收到他的动态~",
      msgFans: "您当前还没有关注者哦，可以多发一些博客来吸引大家~",
      follow: {},
      currentPage: 1,
      total: 0,
      pageSize: 7,
      uid: 0,
      innerDrawer: false,
    };
  },
  methods: {
    fanPage (currentPage) {
      const _this = this;
      _this.$axios
        .get("/follow/getFans/" + _this.uid + "?currentPage=" + currentPage)
        .then((res) => {
          // console.log(res)
          _this.followFans = res.data.data.records;
          _this.currentFanPage = res.data.data.current;
          _this.totalFan = res.data.data.total;
          _this.pageFanSize = res.data.data.size;
        });
    },
    followPage (currentPage) {
      const _this = this;
      _this.$axios
        .get("/follow/getList?currentPage=" + currentPage, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            // console.log(res.data)
            _this.follow = res.data.data.records;
            _this.currentPage = res.data.data.current;
            _this.total = res.data.data.total;
            _this.pageSize = res.data.data.size;
          }
        });
    },
    cancelFollower (id) {
      console.log(id);
      const _this = this;
      // 未登录直接return
      if (sessionStorage.getItem("userInfo") == "{}")
        return _this.$message.error("请先登录");
      // 1. 准备好对方的uid
      _this.$axios
        .post("/follow/post/" + id, null, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          // 请求成功
          if (res.data.code == 200) {
            _this.followPage(1);
          }
        });
    },
    postMessage (id) {
      this.innerDrawer = true;
      this.toUserId = id;
    }
  },
  created () {
    const _this = this;
    // 防止获取不到信息报错
    if (
      sessionStorage.getItem("userInfo") == null ||
      sessionStorage.getItem("userInfo") == "{}"
    ) {
      _this.$store.commit("SET_USERINFO", {});
    } else {
      _this.uid = _this.$store.getters.getUser.id;
      _this.fanPage(1);
      _this.followPage(1);
    }
  },
};
</script>
<style scoped>
/deep/ :focus {
  outline: 0;
}
</style>
<style>
.mpage {
  margin: 0 auto;
  text-align: center;
}

.el-tabs__item:focus.is-active.is-focus:not(:active) {
  box-shadow: none !important;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
</style>
